<template>
    <div>
        <p>我是父组件</p>
        <!-- 使用子组件 -->
        <!-- <Son>
            <ul>
                <li>{{ msg }}</li>
                <li>{{ username }}</li>
            </ul>
        </Son> -->

        <!-- 插槽部分使用组件 -->
        <Son>
            <Child :workTeacher="workTeacher"></Child>
        </Son>

    </div>
</template>
<script>
// 引入子组件
// 插槽的概念:
// 当需要在父组件找到子组件, 在子组件标签之间添加内容, 默认是不显示的,
// 这时候使用插槽可以完成该功能

// 插槽的分类:
// 01: 匿名插槽
// 匿名插槽: 可以在子组件标签之间显示任何内容, 包括模板标签以及数据,以及组件
// 注意: 匿名插槽其实也变相的实现了父传子

// 02: 具名插槽
// 03: 作用域插槽


import Son from './Son.vue';
import Child from './Child.vue'
export default {
    data() {
        return {
            msg: '我要晚自习到11点',
            username: '张会娟',
            workTeacher: '王静老师'
        }
    },
    components: {
        Son,
        Child
    }
}
</script>
<style scoped></style>